<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
-->

<div id="demo">
  <input type="text" v-model="searchName"/>
  <ul>
    <li v-for="(p,index) in filterPersons">
        {{index}}----{{p.name}}----{{p.age}}
    </li>
  </ul>

  <button @click="setOrderType(2)">年龄升序</button>
  <button @click="setOrderType(1)">年龄降序</button>
  <button @click="setOrderType(0)">原本顺序</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
      el: "#demo",
      data: {
        searchName: '',
        orderType: 0,//0代表原本顺序,1代表升序,2代表降序
        persons: [
          {name: 'Tom', age:18},
          {name: 'Jack', age:17},
          {name: 'Bob', age:19},
          {name: 'Mary', age:16}
        ]
      },
      computed: {
        filterPersons(){
          //定义相关数据
          const {searchName,persons,orderType} = this;
          let resultArr;
          //对persons进行过滤
          resultArr=persons.filter(p => p.name.indexOf(searchName)!==-1);
          //排序
          if (orderType!=0){
            resultArr.sort(function (p1,p2) {
              if (orderType==2){
                return p1.age-p2.age;
              }else {
                return p2.age-p1.age;
              }
            });
          }
          return resultArr;
        }
      },
      methods: {
        setOrderType(orderType){
          this.orderType = orderType;
        }
      }
    });
</script>
</body>
</html>